<mat-card>
  <form (ngSubmit)="onSubmit($event)" [formGroup]="formGroup" #entityForm="ngForm">
    <div class="mat-card-title" *ngIf="vminfo">{{ 'Edit' | translate }} {{vminfo.dtype}} {{ vminfo.id }}</div>
    <div class="fieldset-container fieldset-display-default" *ngIf="fieldSets">
      <ng-container *ngFor="let fieldSet of fieldSets; let i = index">
        <div [ngClass]="fieldSet.class" class="fieldset divider-{{fieldSet.divider}}" fxLayout="row wrap" fxLayoutAlign="start start" fxFlex="100%" fxFlex.gt-xs="calc({{fieldSets[i].width}} - 16px)">
          <mat-divider *ngIf="fieldSets[i].divider && i > 0"></mat-divider>
          <div *ngFor="let field of fieldSet.fieldConfig;" fxFlex="100%" fxFlex.gt-xs="calc(100% - 16px)" class="form-line">
            <div dynamicField [config]="field" [group]="formGroup"></div>
          </div>

          <div *ngIf="selectedType == 'CDROM'" fxFlex="100%" fxFlex.gt-xs="calc(100% - 16px)" class="form-line">
            <div *ngFor="let cdromField of fieldSet.cdromFieldConfig;">
              <div dynamicField [config]="cdromField" [group]="cdromFormGroup"></div>
            </div>
          </div>
          <div *ngIf="selectedType == 'NIC'" fxFlex="100%" fxFlex.gt-xs="calc(100% - 16px)" class="form-line">
            <div *ngFor="let nicField of fieldSet.nicFieldConfig;">
              <div dynamicField [config]="nicField" [group]="nicFormGroup"></div>
            </div>
          </div>
          <div *ngIf="selectedType == 'DISK'" fxFlex="100%" fxFlex.gt-xs="calc(100% - 16px)" class="form-line">
            <div *ngFor="let diskField of fieldSet.diskFieldConfig;">
              <div dynamicField [config]="diskField" [group]="diskFormGroup"></div>
            </div>
          </div>
          <div *ngIf="selectedType == 'RAW'" fxFlex="100%" fxFlex.gt-xs="calc(100% - 16px)" class="form-line">
            <div *ngFor="let rawfileField of fieldSet.rawfileFieldConfig;">
              <div dynamicField [config]="rawfileField" [group]="rawfileFormGroup"></div>
            </div>
          </div>
          <div *ngIf="selectedType == 'PCI'" fxFlex="100%" fxFlex.gt-xs="calc(100% - 16px)" class="form-line">
            <div *ngFor="let pciField of fieldSet.pciFieldConfig;">
              <div dynamicField [config]="pciField" [group]="pciFormGroup"></div>
            </div>
          </div>
          <div *ngIf="selectedType == 'VNC'" fxFlex="100%" fxFlex.gt-xs="calc(100% - 16px)" class="form-line">
            <div *ngFor="let vncField of fieldSet.vncFieldConfig;">
              <div dynamicField [config]="vncField" [group]="vncFormGroup"></div>
            </div>
          </div>

        </div>
      </ng-container>
      <mat-card-actions class="buttons">
        <button id="save_button" class="btn btn-block btn-warning" type="submit" mat-button color="primary" [disabled]="!activeFormGroup.valid">{{"Save" | translate}}</button>
        <button id="goback_button" *ngIf="route_success" class="btn  btn-block btn-lg btn-primary" type="button" (click)="goBack()" mat-button color="accent">{{"Cancel" | translate}}</button>
        <span *ngFor="let custBtn of custActions">
          <button id="cust_button_{{custBtn.name}}" mat-button *ngIf="isCustActionVisible" type="button" (click)="custBtn['function']()">{{custBtn.name | translate}}</button>
        </span>
      </mat-card-actions>
      <mat-error *ngIf="error" type="danger" id="error_message"><div [innerHTML]="error"></div></mat-error>
    </div>
  </form>
</mat-card>
